<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="../../vue.js"></script>
</head>
<body>
    <!-- 
        Vue有两大类模板
            1.插值类模板
                功能:用来解析标签体内容
                写法:{{xxx}},xxx是js表达式，且可以取到data中所有属性
            2.指令语法
                功能:用来解析标签(包括标签属性、标签体内容、绑定事件...)
                举例:v-bind:href="xxx" 或 简写成 :href="xxx" xxx是js表达式,
                    且可以取到data中的属性
                备注:Vue中有许多属性，都是v-???的形式
     -->
    <div class="root">
        <h1>插值语法</h1>
        <h3>你好,{{name}}</h3>
        <hr>
        <h1>指令语法</h1>
        <a v-bind:href="video.url">点我去{{video.name}}</a>
        <!-- 方法二 -->
        <a :href="video.url">点我去{{video.name}}</a>
    </div>

    <script type="text/javascript">
        new Vue({
            el:".root",
            data:{
                name:'Tom',
                video:{
                    url:'https://www.bilibili.com/',
                    name:'看视频'
                }
            }
        })
    </script>

</body>
</html>